
/* 网格布局组件 - HarmonyOS设计指南实现 */

/*
窗口宽度 ≥ 840vp，建议使用侧边 Tab，侧边 Tab 的导航选项继承底部 Tab 。
侧边导航栏支持嵌入和悬浮两种显示方式，
在支持窗口自由缩放的大尺寸设备上，根据窗口的宽度变化在达到对应断点值后切换显示方式。
窗口宽度 ≥ 840 使用嵌入，窗口宽度 < 840 使用悬浮。

窗口宽度 ≥ 600vp，建议使用分栏布局。
默认两栏宽度比例为 4:6，特定场景下可支持配置为 5:5 或 6:4
*/

@import "../base/window.less";
@import "../base/color.less";

/* 网格变量 */
:root {
  --grid-gap: var(--gutter-medium);
  --grid-gap-small: var(--gutter-small);
  --grid-gap-large: var(--gutter-large);
  --grid-margin: var(--margin-medium);
  --grid-columns: 12;
  --grid-columns-medium: 8;
  --grid-columns-small: 4;
  --grid-columns-xsmall: 2;
}

/* 基础网格布局 */
.grid {
  margin: var(--grid-margin);
  gap: var(--grid-gap);
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

/* 中等屏幕：8 列 */
@media screen and (max-width: @breakpoint-medium) {
  .grid {
    grid-template-columns: repeat(var(--grid-columns-medium), 1fr);
  }
}

/* 小屏幕：4 列 */
@media screen and (max-width: @breakpoint-small) {
  .grid {
    grid-template-columns: repeat(var(--grid-columns-small), 1fr);
  }
}

/* 超小屏幕：2 列 */
@media screen and (max-width: @breakpoint-xsmall) {
  .grid {
    grid-template-columns: repeat(var(--grid-columns-xsmall), 1fr);
  }
}

/* 网格列宽类 */
.grid-col-1,
.col-1 {
  grid-column: span 1;
}

.grid-col-2,
.col-2 {
  grid-column: span 2;
}

.grid-col-3,
.col-3 {
  grid-column: span 3;
}

.grid-col-4,
.col-4 {
  grid-column: span 4;
}

.grid-col-5,
.col-5 {
  grid-column: span 5;
}

.grid-col-6,
.col-6 {
  grid-column: span 6;
}

.grid-col-7,
.col-7 {
  grid-column: span 7;
}

.grid-col-8,
.col-8 {
  grid-column: span 8;
}

.grid-col-9,
.col-9 {
  grid-column: span 9;
}

.grid-col-10,
.col-10 {
  grid-column: span 10;
}

.grid-col-11,
.col-11 {
  grid-column: span 11;
}

.grid-col-12,
.col-12 {
  grid-column: span 12;
}

/* 网格间距变体 */
.grid-gap-none,
.grid.no-gap {
  gap: 0;
}

.grid-gap-small,
.grid.gap-small {
  gap: var(--grid-gap-small);
}

.grid-gap-medium,
.grid.gap-medium {
  gap: var(--grid-gap);
}

.grid-gap-large,
.grid.gap-large {
  gap: var(--grid-gap-large);
}

/* 网格对齐方式 */
.grid-align-start,
.grid.align-start {
  align-items: start;
}

.grid-align-center,
.grid.align-center {
  align-items: center;
}

.grid-align-end,
.grid.align-end {
  align-items: end;
}

.grid-align-stretch,
.grid.align-stretch {
  align-items: stretch;
}

/* 网格内容对齐 */
.grid-justify-start,
.grid.justify-start {
  justify-items: start;
}

.grid-justify-center,
.grid.justify-center {
  justify-items: center;
}

.grid-justify-end,
.grid.justify-end {
  justify-items: end;
}

.grid-justify-stretch,
.grid.justify-stretch {
  justify-items: stretch;
}

/* 网格行间距 */
.grid-row-gap-none,
.grid.row-gap-none {
  row-gap: 0;
}

.grid-row-gap-small,
.grid.row-gap-small {
  row-gap: var(--gutter-small);
}

.grid-row-gap-medium,
.grid.row-gap-medium {
  row-gap: var(--gutter-medium);
}

.grid-row-gap-large,
.grid.row-gap-large {
  row-gap: var(--gutter-large);
}

/* 网格列间距 */
.grid-col-gap-none,
.grid.col-gap-none {
  column-gap: 0;
}

.grid-col-gap-small,
.grid.col-gap-small {
  column-gap: var(--gutter-small);
}

.grid-col-gap-medium,
.grid.col-gap-medium {
  column-gap: var(--gutter-medium);
}

.grid-col-gap-large,
.grid.col-gap-large {
  column-gap: var(--gutter-large);
}

/* 分栏布局 */
.grid-two-columns,
.grid.two-columns {
  grid-template-columns: 4fr 6fr;
}

.grid-two-columns-equal,
.grid.two-columns-equal {
  grid-template-columns: 5fr 5fr;
}

.grid-two-columns-reverse,
.grid.two-columns-reverse {
  grid-template-columns: 6fr 4fr;
}

.grid-three-columns,
.grid.three-columns {
  grid-template-columns: repeat(3, 1fr);
}

.grid-four-columns,
.grid.four-columns {
  grid-template-columns: repeat(4, 1fr);
}

/* 响应式分栏布局 */
@media screen and (max-width: @breakpoint-medium) {
  .grid-two-columns,
  .grid.two-columns,
  .grid-two-columns-equal,
  .grid.two-columns-equal,
  .grid-two-columns-reverse,
  .grid.two-columns-reverse,
  .grid-three-columns,
  .grid.three-columns,
  .grid-four-columns,
  .grid.four-columns {
    grid-template-columns: 1fr;
  }
}
